<script>
    $(document).ready(function () {
        $("#form-coment").submit(function () {
            $.ajax({
                type:"POST",
                url:"/agregar-comentario/" + "{{ sol.id }}",
                data:$(this).serialize(),
                success:function (data) {
                    $('#coments').html(data);
                    $('#area').text("");
                }
            });
            return false;
        });
    });
    function aprobar(id) {
        $.ajax({
            type:"GET",
            url:"/aprobar-comentario/?id=" + id + "&sol=" +{{ sol.id }},
            success:function (data) {
                $('#coments').html(data);
            }
        });
        return false;
    }
    function vaciarmodal() {
        $('#detalles').html("");
    }
</script>
<div class="modal-header">
    <a class="close" data-dismiss="modal" onclick="setTimeout('vaciarmodal()',800)">x</a>

    <h3>Detalles de la Solicitud</h3>
</div>
<div class="modal-body" style="padding: 0px; max-height: 430px; margin-bottom: 20px;">
    <div class="container-fluid">
        <div style="background-color: #fdf6e2; width: 50%; float: left; height: 383px; overflow-y: auto;">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Solicitante</label>

                    <div class="controls">
                        <p>{{ sol.emisor.get_full_name }}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Empleado encargado</label>

                    <div class="controls">
                        <p>{{ sol.receptor.get_full_name }}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Fecha de creación</label>

                    <div class="controls">
                        <p>{{ sol.creacion|date:"d-m-Y H:i:s" }}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Fecha de inicio</label>

                    <div class="controls">
                        {% if sol.inicio %}
                            <p>{{ sol.inicio|date:"d-m-Y H:i:s" }}</p>
                        {% else %}
                            <p> ----------- </p>
                        {% endif %}
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Fecha de Termino</label>

                    <div class="controls">
                        {% if sol.estado == 4 %}
                            <p>{{ sol.fin|date:"d-m-Y H:i:s" }}</p>
                        {% else %}
                            <p> ----------- </p>
                        {% endif %}
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Duración</label>

                    <div class="controls">
                        {% if sol.duracion %}
                            <p>{{ sol.duracion }}</p>
                        {% else %}
                            <p> ----------- </p>
                        {% endif %}
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Estado</label>

                    <div class="controls">
                        <p>
                            {% if sol.estado == 1 %}
                                Pendiente
                            {% endif %}
                            {% if sol.estado == 2 %}
                                Ejecutándose
                            {% endif %}
                            {% if sol.estado == 3 %}
                                Pausada
                            {% endif %}
                            {% if sol.estado == 4 %}
                                Terminada
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Descripcion</label>

                    <div class="controls">
                        <p>{{ sol.descripcion }}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Tipo</label>

                    <div class="controls">
                        <p>{{ sol.tipo }}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" style="font-weight: bold;">Categoria</label>

                    <div class="controls">
                        <p>{{ sol.categoria }}</p>
                    </div>
                </div>
                {% if sol.rubro %}
                    <div class="control-group">
                        <label class="control-label" style="font-weight: bold;">Rubro</label>

                        <div class="controls">
                            <p>{{ sol.rubro }}</p>
                        </div>
                    </div>
                {% endif %}
            </form>
        </div>
        <div id="coments" style="padding-left: 0; width: 50%; background-color: #f5f5f5; float: left; height: 50%;">
            {% include "ver_comentarios.html" %}
        </div>
    </div>
</div>